<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>统计页面</title>
</head>
<body>

<!-- 展示柱状图的位置 -->
<div id="main" style="width: 100%;height:800px;"></div>


<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/echarts.min.js" type="text/javascript"></script>
<script type="text/javascript">

    $.getJSON("/air/findEchartsData",null,function(result){
        var mycharts = echarts.init(document.getElementById("main"));


        var xArray = [];
        var yArray = [];

        // 柱状图
        var option = {
            title: {
                text: "PM2.5数据统计",
                left: 10
            },
            toolbox: {
                feature: {
                    dataZoom: {
                        yAxisIndex: false
                    },
                    saveAsImage: {
                        pixelRatio: 2
                    }
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                bottom: 90
            },
            dataZoom: [{
                type: 'inside'
            }, {
                type: 'slider'
            }],
            xAxis: {
                data: xArray,
                silent: false,
                splitLine: {
                    show: false
                },
                splitArea: {
                    show: false
                }
            },
            yAxis: {
                splitArea: {
                    show: false
                }
            },
            series: [{
                type: 'bar',
                data: yArray,
                // Set `large` for large data amount
                large: true
            }]
        };

        var jsonArray = result.data;
        for (var i = 0; i < jsonArray.length; i++) {
            xArray.push(jsonArray[i].key);
            yArray.push(jsonArray[i].docCount);
        }
        console.log(xArray);
        console.log(yArray);
        // 渲染柱状图
        mycharts.setOption(option);
    });



</script>
</body>
</html>